<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表循环</title>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    let hero = ["刘备", "关羽", "张飞"];
// let lis =  hero.map((item,index)=>{
//         console.log(item,index)
//         return <li>{item}</li>
//     })

/* 
 列表循环时为什么必须要绑定一个key?
 diff算法：同级比较
*/
   let goods = [
    {
        name:"iphone",
        price:5699,
    },{
        name:"华为",
        price:4999
    },{
        name:"小米",
        price:3999
    }
   ]
   // 虚拟dom 
    let ul = (
       <div>
        <ul>
            {
                hero.map((item, index) => {
                    // 必须绑定 key （为更好的实现diff算法）
                    return <li key={index}>{item}</li>
                })
            }
        </ul> 
        <ol>
            {/*箭头函数特性; 当函数返回值只有一个 可以省略大括号和return */}
            {
                goods.map((item,index)=><li key={index}>{item.name}----{item.price}</li>)
            }    
        </ol> 
      </div>
    )
    // 渲染到页面
    ReactDOM.render(ul,document.getElementById("root"))




    

    // 1，forEach的缺点 ： 没有返回值
//    let lis = hero.forEach((item,index)=>{
//         return <li>{item}</li>
//     })
//     console.log(lis)

    // 2，map 可以有返回值   返回值是一个数组
  // let lis =  hero.map((item,index)=>{
    //     console.log(item,index)
    //     return <li>{item}</li>
    // })
    // console.log(lis)
</script>

</html>